<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <base href="/">

    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">
    <link rel="stylesheet" href="vendors/datepicker/daterangepicker.css">
    <link rel="stylesheet" href="vendors/vmap/jqvmap.min.css">
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <!--弹窗CSS-->
    <link rel="stylesheet" href="assets/css/modal.css" type="text/css">
</head>
<body class="container">

<div class="preloader">
    <div class="preloader-icon"></div>
</div>

<!--引入公共头部页面-->
<div th:replace="~{commons/header :: header}"></div>

<div id="main">
    <!--引入公共导航栏页面-->
    <div th:replace="~{commons/navigation :: navigation}"></div>

    <!-- begin::主要内容 -->
    <div class="main-content">
        <div class="container-fluid card">
            <!--搜索-->
            <div class="row" style="padding-top: 15px">
                <div class="col-md-6">
                    <div class="dataTables_length" id="example2_length">
                        <label>Show entries
                            <select disabled readonly name="example2_length" aria-controls="example2"
                                    class="custom-select custom-select-sm form-control form-control-sm">
                                <option value="6">6</option>
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select></label>
                    </div>
                </div>
                <div class="col-md-6" style="float: right;position: relative">
                    <div id="example2_filter" class="dataTables_filter">
                        <a href="/user/add_request"
                           style="border-radius: 8px; position: absolute;bottom: 8px;right: 15px" class="page-link">创建新的采购申请</a>
                    </div>
                </div>
            </div>
            <!--表格-->
            <div class="row">
                <div class="col-md-12">
                    <table id="myTable" class="table table-bordered text-center">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>单据编号</th>
                            <th>煤种</th>
                            <th>热卡值</th>
                            <th>煤量（万吨）</th>
                            <th>状态</th>
                            <th>审批日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="user-table">
                        <tr th:each="purchapply,state:${purchapplies}">
                            <td th:text="${state.index+1+pageSize*(currentPage -1)}">1</td>
                            <td th:text="${purchapply.documentNumber}">中能热电2015-10-083</td>
                            <td th:text="${purchapply.coalType}">烟煤</td>
                            <td th:text="${purchapply.calorieValue}">5000</td>
                            <td th:text="${purchapply.procureCount}">8.00</td>
                            <td th:if="${purchapply.approvalStatus=='pending'}">待审核</td>
                            <td th:if="${purchapply.approvalStatus=='published'}">已发布</td>
                            <td th:if="${purchapply.approvalStatus=='rejected'}">已驳回</td>
                            <td th:text="${#dates.format(purchapply.approvalTime,'yyyy-MM-dd')}">2015-09-04</td>
                            <td>
                                <div class="dropdown">
                                    <a class="btn btn-sm" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a th:href="@{/user/purchaseDetail(id=${purchapply.purchapplyId})}"
                                           class="dropdown-item" type="button">查看详情</a><!--已发布-->
                                        <!--<a th:href="'/purchaseRequest/getDetail/'+${purchapply.purchapplyId}" class="dropdown-item" type="button">查看详情</a>&lt;!&ndash;已发布&ndash;&gt;-->
                                        <a th:href="@{/user/modify_request(id=${purchapply.purchapplyId})}"
                                           th:if="${purchapply.approvalStatus=='rejected'}" class="dropdown-item"
                                           type="button">修改申请</a><!--已驳回-->
                                        <a th:href="@{/user/request_perform_delete(id=${purchapply.purchapplyId})}"
                                           th:if="${purchapply.approvalStatus=='rejected'}"
                                           class="dropdown-item del-request" type="button">删除申请</a><!--已驳回-->
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--分页-->
            <div class="row" style="padding-bottom: 15px">
                <div class="col-sm-12 col-md-12">
                    <nav aria-label="...">
                        <ul class="pagination" id="user-pagination">

                            <li th:class="${currentPage==1?'disabled page-item':'page-item'}">
                                <a class="page-link" tabindex="-1" aria-disabled="true"
                                   th:href="@{${#request.getServletPath()}(pageIndex=${currentPage -1},pageSize=${pageSize})}">上一页</a>
                            </li>
                            <li th:class="${currentPage==i?'active page-item':'page-item'}"
                                th:each="i:${#numbers.sequence(1,pageNum)}" th:if="${pageNum>0}">
                                <a class="page-link" th:text="${i}"
                                   th:href="@{${#request.getServletPath()}(pageIndex=${i},pageSize=${pageSize})}">1</a>
                            </li>
                            <li th:class="${currentPage==pageNum?'disabled page-item':'page-item'}">
                                <a class="page-link"
                                   th:href="@{${#request.getServletPath()}(pageIndex=${currentPage+1},pageSize=${pageSize})}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- end::page content -->

        <div th:replace="~{commons/footer :: footer}"></div>


    </div>
</div>
<!--引入公共的JavaScript脚本-->
<div th:replace="~{commons/scripts :: scripts}"></div>
<script src="assets/js/app.js"></script>

<script th:inline="javascript">
    $(() => {

        /**
         * 删除请求
         */
        $('#user-table > tr a.del-request').each(function () {
            $(this).click(function (ev) {
                let url = this.href;
                //提示是否要删除该请求
                let mModal1 = new mModal({
                    title: "提示", // 标题，默认：提示
                    width: "25%", // 弹出框宽度，默认 25%
                    top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                    content: "是否要删除该请求", // 正文，默认：正文内容
                    cancelText: "取 消", // 取消按钮文本
                    confirmText: "确 定", // 确定按钮文本
                    showCancelButton: true, // 是否显示取消按钮
                    showConfirmButton: true, // 是否显示确定按钮
                    showClose: true, // 是否显示关闭按钮
                    modal: true, // 是否需要遮罩层
                    customClass: "", // 自定义类名confirm
                    confirm: function () {
                        mModal1.close();
                        $.post(url, function (result) {
                            if (result.code >= 0) {
                                window.location.reload();
                            } else {
                                let mModal2 = new mModal({
                                    title: "提示", // 标题，默认：提示
                                    width: "25%", // 弹出框宽度，默认 25%
                                    top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                                    content: result.msg, // 正文，默认：正文内容
                                    cancelText: "取 消", // 取消按钮文本
                                    confirmText: "确 定", // 确定按钮文本
                                    showCancelButton: false, // 是否显示取消按钮
                                    showConfirmButton: true, // 是否显示确定按钮
                                    showClose: true, // 是否显示关闭按钮
                                    modal: true, // 是否需要遮罩层
                                    customClass: "", // 自定义类名confirm
                                    confirm: function () {
                                        mModal2.close();
                                    },
                                });
                                mModal2.renderDom();
                            }
                        }, "json")
                    },
                });
                mModal1.renderDom();
                return false;
            })
        })
    })

</script>
</body>
</html>
